<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
                  margin: 0;
                  padding: 0;
            }
            body,html{
                  height: 100%;
                  background: #f4f4f4;
                  font: 14px/1.5 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
            }
            .container{
                  width: 1150px;
                  margin: 20px auto;
            }
            .box{
                  border-radius: 4px;
                  overflow: hidden;
                  float: left;
                  margin-right: 20px;
                  background: #fff;
                  position: relative;
                  padding-bottom: 5px;
            }
            .box img{
                  width: 210px;
                  height: 118px;
            }
            .title{
                  padding: 0 10px;
                  margin-top: 4px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 190px;
            }
    </style>
</head>

<body>
    
    <button id="change">换一换</button>
    <div class="container"></div>

        <script src="./js/jquery.js"></script>

        <script>
            var box = $("#change")
            var pageNo = 2
            var formId = 379
            box.click(function () {
                var script = document.createElement("script")
                script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=" + pageNo + "&pageSize=5&fromId=" + formId + "&jsonpcallback=callback&_=" + Date.now();
                document.body.append(script)
            })
            function callback(data) {
                console.log(data);
                var html = ""
                for (var i = 0; i < data.datas.length; i++) {
                    html += `
                    <div class="box">
                        <img src="${data.datas[i].image}" alt="">
                        <div class="title">

                            ${data.datas[i].name}
                        </div>
                    </div>
                    `
                    
                }
               $(".container").html(html)
                pageNo++
                formId=data.datas[data.datas.length-1].courseId
                console.log(formId);
            }

            //要找规律
        </script>
</body>

</html>